<template>
  <div id="add-budget">
    <form v-on:submit="addbudgets">
      <label class="alert alert-info" role="alert">账单金额</label>
      <input type="text" v-model="budget.amount" required />

      <label class="alert alert-info" role="alert">账单分类:</label>
      <select class="btn" v-model="budget.type">
        <option value="收入">收入</option>
        <option value="支出">支出</option>
      </select>
      <label class="alert alert-info" role="alert">账单时间:</label>
      <div class="choose_date">
        <el-date-picker
          v-model="budget.time"
          type="date"
          placeholder="选择日期"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd">
        </el-date-picker></div>
      <label class="alert alert-info" role="alert">备注</label>
      <textarea v-model="budget.remark"></textarea>
      <button type="submit" class="btn btn-primary">添加</button>
    </form>
  </div>
</template>

<script>
export default {
  name: 'Addbudget',
  data () {
    return {
      budget: {}
    }
  },
  methods: {
    addbudgets (e) {
      e.preventDefault()
      let newbudget = {
        type: this.budget.type,
        time: this.budget.time,
        amount: parseInt(this.budget.amount),
        remark: this.budget.remark
      }
      this.$http.post('http://localhost:3000/budget', newbudget)
        .then((response) => {
          console.log(response)
          this.$router.push({path: '/Budget/Center', query: {alert: '账单添加成功!'}})
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #add-budget *{
    box-sizing: border-box;
  }

  #add-budget{
    margin: 0 auto;
    max-width: 600px;
    padding-top: 0px;
    padding-right: 20px;
    padding-left: 20px;
  }

  label{
    display: block;
    margin: 10px 0 10px;
  }

  input[type="text"],textarea{
    display: block;
    width: 100%;
    padding: 8px;
    border: mediumaquamarine 1px solid;
  }
  select{
    background: white;
    border: mediumaquamarine 1px solid;
  }

  textarea{
    height: 100px;
  }

  #checkboxes label{
    display: inline-block;
    margin-top: 0;
  }

  #checkboxes input{
    display: inline-block;
    margin-right: 10px;
  }

  button{
    display: block;
    height: 40px;
    width: 100%;
    margin-top: 10px;
    background: #428eda;
    color: #fff;
    border: 0;
    border-radius: 18px;
    font-size: 16px;
    cursor: pointer;
  }

  #preview{

    padding: 10px 20px;
    border: 1px dotted #ccc;
    margin: 30px 0;
  }
  #preview p,li{
    margin: 10px;
  }
  h3{
    color: #66cdaa;
    font-size: 16px;
    font-weight: bolder;
    margin: 10px;
  }

</style>
